<template>
  <div class="enterBill">
    <el-row class="mb-10">
      <el-col class="mb-10">
        <el-col :span="6" class="mb-10">
          <el-button type="text" class="textBtn">录入日期</el-button>
        </el-col>
        <el-col :span="16">
          <el-date-picker class="dataPicker" v-model="enterBill.enterDate" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </el-col>
      <el-col class="purposeBox mb-10" v-for="(item,inx) of enterBill.enterData" :key="inx">
        <el-col :span="6">
          <el-button type="text" class="textBtn">用途&金额</el-button>
        </el-col>
        <el-col :span="16">
          <el-col :span="14">
            <el-input v-model="item.purpose" placeholder="录入用途" clearable></el-input>
          </el-col>
          <el-col :span="9" :offset="1">
            <el-input v-model="item.money" placeholder="金额">
              <el-button slot="suffix" type="text" class="textBtn money">
                <svg-icon icon-class="money" />
              </el-button>
            </el-input>
          </el-col>
        </el-col>
        <el-button type="text" class="addpurpose" @click="purposeOperating(inx)">
          &nbsp;
          <i :class="inx === 0 ? 'el-icon-circle-plus-outline':'el-icon-remove-outline'"></i>&nbsp;&nbsp;
        </el-button>
      </el-col>
      <el-col :span="6" :offset="16" class="mb-10">
        <el-button :loading="loading" type="primary" style="width:100%" @click="submitEnter">提交录入</el-button>
      </el-col>
    </el-row>
    <el-row v-if="showInfo">
      <el-col class="mb-10">
        <div class="currentInfo">{{ tableData.data.enterDate }} 账单信息</div>
      </el-col>
      <el-table :data="tableData.data.enterData" style="width: 100%">
        <el-table-column prop="purpose" label="用途">
        </el-table-column>
        <el-table-column prop="money" label="花费">
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { guid } from "@/utils";
import { saveData, getData } from "@/api/enterBill";
export default {
  data() {
    return {
      enterBill: {
        enterDate: "",
        enterData: []
      },
      showEnterBill: [],
      todey: "",
      loading: false,
      currentUser: this.$store.getters.token,
      tableData: {},
      showInfo: false
    };
  },
  mounted() {
    let newDate = new Date(),
      Y = newDate.getFullYear(),
      M = newDate.getMonth() + 1,
      D = newDate.getDate();
    this.enterBill.enterDate = this.todey = Y + "-" + M + "-" + D;
    if (this.enterBill.enterData.length === 0) {
      this.enterBill.enterData.push({ guid: guid() });
    }
    getData(this.currentUser, this.todey).then(res => {
      console.log(res);
      this.tableData = res;
      // console.log(this.tableData);
      this.showInfo = true;
    });
  },
  methods: {
    // 提交录入
    submitEnter() {
      this.loading = true;
      if (
        this.enterBill.enterData.length === 1 &&
        !this.enterBill.enterData[0].money
      ) {
        console.log(`没有数据`);
        this.loading = false;
        return false;
      }
      let tempEnterBill = { ...this.enterBill };
      tempEnterBill.enterData.forEach((el, inx) => {
        if (!el.money) {
          tempEnterBill.enterData.splice(inx, 1);
        }
      });
      tempEnterBill.username = this.currentUser;
      saveData(tempEnterBill).then(res => {
        console.log(res);
        this.loading = false;
      });

      this.enterBill.enterData = [{ guid: guid() }];
    },
    // 用途操作
    purposeOperating(inx) {
      if (inx === 0) {
        this.enterBill.enterData.push({ guid: guid() });
      } else {
        this.enterBill.enterData.splice(inx, 1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.enterBill {
  padding-top: 50px;
  // 文字按钮
  .textBtn {
    color: #000;
  }
  // 日期选择框
  .dataPicker {
    width: 100%;
  }
  // 金额图标
  .money {
    color: #ccc;
  }
  // 用途盒子
  .purposeBox {
    position: relative;
    // 添加用途
    .addpurpose {
      position: absolute;
      color: #3a8ee6;
    }
  }
  // 信息框下边框
  .currentInfo {
    margin-top: 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    height: 28px;
    line-height: 28px;
  }
}
</style>
